<script setup>
import { defineEmits } from 'vue';
import { contextFlow } from './json/doc_context.js';
import { forFlow } from './json/doc_for.js';
import { ifFlow } from './json/doc_if.js';
import { iteratorFlow } from './json/doc_iterator.js';
import { routerFlow } from './json/doc_router.js';
import { subflowFlow } from './json/doc_subflow.js';
import { subvarFlow } from './json/doc_subvar.js';
import { switchFlow } from './json/doc_switch.js';
import { thenFlow } from './json/doc_then.js';
import { thenWhenFlow } from './json/doc_then_when.js';
import { whenFlow } from './json/doc_when.js';
import { whileFlow } from './json/doc_while.js';

const emit = defineEmits(['initFlowData'])

const onDocumentJson = (id) => {
  let flowData = {}
  if(id == 0){
    flowData = thenFlow()
  }else if(id == 1){
    flowData = whenFlow()
  }else if(id == 2){
    flowData = switchFlow()
  }else if(id == 3){
    flowData = ifFlow()
  }else if(id == 4){
    flowData = whileFlow()
  }else if(id == 5){
    flowData = forFlow()
  }else if(id == 6){
    flowData = iteratorFlow()
  }else if(id == 10){
    flowData = thenWhenFlow()
  }else if(id == 11){
    flowData = subflowFlow()
  }else if(id == 12){
    flowData = subvarFlow()
  }else if(id == 13){
    flowData = routerFlow()
  }else if(id == 14){
    flowData = contextFlow()
  }
  emit('initFlowData', flowData)
}
</script>

<template>
  <aside class="ivy-aside-scrollbar" style="overflow: hidden auto;user-select:none">
    <vs-collapse type="margin" class="ivy-collapse-doc" :open-hover="false">
      <vs-collapse-item open>
       <template #header>
         <div>
          流程编排
         </div>
       </template>
       <span style="padding-block-end: 8px;">
        <vs-button class="w-100" style="margin-block-end: 8px;" size="small" @click="onDocumentJson(0)"> 串行编排 </vs-button>
        <vs-button class="w-100" style="margin-block-end: 8px;" size="small" @click="onDocumentJson(1)"> 并行编排 </vs-button>
        <vs-button class="w-100" style="margin-block-end: 8px;" size="small" @click="onDocumentJson(10)"> 嵌套编排 </vs-button>
        <vs-button class="w-100" style="margin-block-end: 8px;" size="small" @click="onDocumentJson(2)"> 选择编排 </vs-button>
        <vs-button class="w-100" style="margin-block-end: 8px;" size="small" @click="onDocumentJson(3)"> 条件编排 </vs-button>
        <vs-button class="w-100" style="margin-block-end: 8px;" size="small" @click="onDocumentJson(4)"> 循环条件编排 </vs-button>
        <vs-button class="w-100" style="margin-block-end: 8px;" size="small" @click="onDocumentJson(5)"> 循环次数编排 </vs-button>
        <vs-button class="w-100" style="margin-block-end: 8px;" size="small" @click="onDocumentJson(6)"> 循环迭代编排 </vs-button>
        <vs-button class="w-100" style="margin-block-end: 8px;" size="small" @click="onDocumentJson(11)"> 子流程编排 </vs-button>
        <vs-button class="w-100" style="margin-block-end: 8px;" size="small" @click="onDocumentJson(12)"> 子变量编排 </vs-button>
        <vs-button class="w-100" style="margin-block-end: 8px;" size="small" @click="onDocumentJson(13)"> 路由编排 </vs-button>
        <vs-button class="w-100" style="margin-block-end: 8px;" size="small" @click="onDocumentJson(14)"> 数据上下文 </vs-button>
       </span>
     </vs-collapse-item>
    </vs-collapse>
  </aside>
</template>

<style scoped>
.ivy-collapse{
  padding: 0 !important;
}

.ivy-collapse .vs-collapse-item{
  margin: 0 !important;
  background-color: transparent;
  box-shadow: none;
}

.ivy-aside-scrollbar{
  block-size: calc(100vh - 240px);
}

/* 只针对具有ivy-aside-scrollbar类的元素的滚动条宽度 */
.ivy-aside-scrollbar::-webkit-scrollbar {
  inline-size: 0;
}

</style>
<style>
.ivy-collapse-doc .vs-collapse-item .vs-collapse-item--content .con-content--item{
  padding-block-start: 10px !important;
}

.w-100{
  inline-size: 100%;
}

</style>
